import React,{createRef} from "react"
import './index.scss'
import BScroll from 'better-scroll'
import citySource from "./citySource"
import ContentView from "../../../components/ContentView"
const cityTabsNameSource = citySource.map(item=>item.name)
export default class MapSource extends React.Component{
        constructor (props) {
                super (props);
                this.state={
                        scrollItemHeightArray:[],
                        scrollItemText:citySource[0]?.name
                }
                this.scrollDom = createRef()
                this.scrollContent = null
        }
        componentDidMount () {
                this.scrollInitialize()
        }
        scrollInitialize=()=>{
                //初始化better-scroll滚动
                this.scrollContent = new BScroll(this.scrollDom.current,{click:true,probeType: 3});
                //获取城市列表Item高度列表
                const cityDomItem = [...document.getElementsByClassName('city-source-item')];

                let scrollItemHeightArray = [];
                let itemHeight = 0;
                scrollItemHeightArray.push(itemHeight);
                cityDomItem.forEach(item=>{
                        itemHeight+=item.clientHeight
                        scrollItemHeightArray.push(itemHeight)
                });
                this.setState({scrollItemHeightArray},()=>{
                        //滚动停止锚点绑定设置
                        this.scrollContent.on('scrollEnd', pos=>{
                                const posY = Math.abs(Math.round(pos.y))
                                for(let i=0;i<scrollItemHeightArray.length;i++){
                                        if (scrollItemHeightArray[i] > posY) {
                                                this.setState({scrollItemText:cityTabsNameSource[i-1]})
                                                break
                                        }
                                }
                        })
                });
        }
        scrollAnchorPost=index=>{
                const cityDomItem = [...document.getElementsByClassName('city-source-item')]
                const el = cityDomItem[index]
                this.scrollContent.scrollToElement(el,300)
        }
        render () {
                const {scrollItemText} = this.state
                return <ContentView title='城市选择'>
                        <div className='map-source-page' ref={this.scrollDom}>
                                <div className="scroll-container">
                                        {
                                                citySource.map((item,index)=>{
                                                        return <div key={index} className='city-source-item'>
                                                                <div className="label">{item.name}</div>
                                                                <div className="city-content">
                                                                        {
                                                                                item.cities.map((row,index)=>
                                                                                        <div key={index} className='item'>{row.name}</div>)
                                                                        }
                                                                </div>
                                                        </div>
                                                })
                                        }
                                </div>
                                <div className="fixed-tab-wrapper">
                                        {
                                                cityTabsNameSource.map((item,index)=><div
                                                        className={`city-tag-item ${scrollItemText===item&&'active'}`}
                                                        key={item}
                                                        onClick={this.scrollAnchorPost.bind(this,index)}>{item}</div>)
                                        }
                                </div>
                        </div>
                </ContentView>
        }
}
